(function () {
    //按钮组件
    var btn_primary = rough.canvas(document.getElementById('btn-primary'));
    btn_primary.rectangle(0, 0, btn_primary.canvas.width, btn_primary.canvas.height, { stroke: '#007bff' });

    var btn_secondary = rough.canvas(document.getElementById('btn-secondary'));
    btn_secondary.rectangle(0, 0, btn_secondary.canvas.width, btn_secondary.canvas.height, { roughness: 0.5, fill: 'red' });

    var btn_success = rough.canvas(document.getElementById('btn-success'));
    btn_success.rectangle(0, 0, btn_success.canvas.width, btn_success.canvas.height, { bowing: 6, stroke: 'green', strokeWidth: 3 });

    var btn_danger = rough.canvas(document.getElementById('btn-danger'));
    btn_danger.rectangle(0, 0, btn_danger.canvas.width, btn_danger.canvas.height, { roughness: 2.8, fill: 'blue' });

    //卡片
    var card1 = rough.canvas(document.getElementById('card1'));
    card1.rectangle(0, 0, card1.canvas.width, card1.canvas.height, { bowing: 3, stroke: 'green', strokeWidth: 1 });

    var card2 = rough.canvas(document.getElementById('card2'));
    card2.rectangle(0, 0, card2.canvas.width, card2.canvas.height, { roughness: 2.8, fill: 'pink', stroke: "" });

    var card3 = rough.canvas(document.getElementById('card3'));
    card3.rectangle(0, 0, card3.canvas.width + 20, card3.canvas.height + 50, { roughness: 2.8, fill: 'blue' });

    //表单
    var password = rough.canvas(document.getElementById('password'));
    password.rectangle(0, 0, password.canvas.width, password.canvas.height, { roughness: 2.8, stroke: "grey" });
    var submit = rough.canvas(document.getElementById('submit'));
    submit.rectangle(0, 0, submit.canvas.width, submit.canvas.height, { roughness: 2.8, fill: 'blue' });

    var password2 = rough.canvas(document.getElementById('password2'));
    password2.rectangle(0, 0, password2.canvas.width, password2.canvas.height, { roughness: 2.8, stroke: "#dc3545" });
    var submit2 = rough.canvas(document.getElementById('submit2'));
    submit2.rectangle(0, 0, submit2.canvas.width, submit2.canvas.height, { bowing: 6, stroke: '#dc3545', strokeWidth: 10 });

    var password3 = rough.canvas(document.getElementById('password3'));
    password3.rectangle(0, 0, password3.canvas.width, password3.canvas.height, { roughness: 2.8, stroke: "green" });
    var submit3 = rough.canvas(document.getElementById('submit3'));
    submit3.rectangle(0, 0, submit3.canvas.width, submit3.canvas.height, { bowing: 6, stroke: 'green', strokeWidth: 10 });
})();